<template>
  <view class="main">
    <view class="page-bg"></view>
    <view class="page-container">
      <image class="logo" src="/static/logo.png"></image>
      <view class="login-form">
        <view class="con-form">
          <view class="form-text">账号</view>
          <up-input v-model="state.username" border="bottom" placeholder="请输入账号" @blur="validateUsername"
                    :customStyle="{padding: '10rpx 0'}"></up-input>
          <view class="error-text" v-if="errors.username">{{ errors.username }}</view>
        </view>
        <view class="con-form">
          <view class="form-text">密码</view>
          <up-input v-model="state.password" type="password" border="bottom" placeholder="请输入密码"
                    @blur="validatePassword" :customStyle="{padding: '10rpx 0'}"></up-input>
          <view class="error-text" v-if="errors.password">{{ errors.password }}</view>
        </view>
        <u-radio-group v-model="state.remMe" class="remember-me">
          <u-radio shape="circle" label="记住密码" activeColor="#315EBC"></u-radio>
        </u-radio-group>
        <u-button type="primary" text="登录" @click="login" size="normal" color="#315EBC" :loading="loading"
                  style="margin-top: 50rpx; width: 100%; font-weight: 500; letter-spacing: 1rpx;"></u-button>
      </view>
      <view class="page-setting" @click="navSetting">
        <u-icon name="setting" :size="22" color="#315EBC"></u-icon>
      </view>
    </view>
    <up-toast ref="uToast"></up-toast>
  </view>
</template>

<script setup>
import {computed, reactive, ref} from 'vue';
import {jumpPage} from '../../until';
import {loginApi} from '../../api/login';
import {encryptData} from '../../until/encrypt';
import {useUserStore} from '../../store/user.js'

const state = reactive({
  username: '',
  password: '',
  remMe: false,
});

const errors = reactive({
  username: '',
  password: ''
});

const loading = ref(false);
const uToast = ref();

const formValid = computed(() => {
  return state.username && state.password && !errors.username && !errors.password;
});

function validateUsername() {
  if (!state.username.trim()) {
    errors.username = '请输入账号';
    return false;
  }
  errors.username = '';
  return true;
}

function validatePassword() {
  if (!state.password.trim()) {
    errors.password = '请输入密码';
    return false;
  }
  if (state.password.length < 6) {
    errors.password = '密码长度不能少于6位';
    return false;
  }
  errors.password = '';
  return true;
}

async function login() {
  if (!validateUsername() || !validatePassword()) return;

  loading.value = true;

  try {

    let params = {
      loginName: state.username,
      password: encryptData(state.password),
      loginDevice: 2,
      captchaUuid: "nothing",
      captchaCode: "nothing",
    }
    await loginApi(params).then((res => {
      uToast.value.show({
        type: 'success',
        message: '登录成功',
        icon: 'checkmark-circle'
      });
      if (state.remMe) {
        uni.setStorageSync('username', state.username);
        // 注意：实际项目中不建议明文存储密码
      } else {
        uni.removeStorageSync('username');
      }
      useUserStore().initUserInfo(res.data)
      uni.setStorageSync("token", res.data.token)
      jumpPage("index/index");
    }))
  } catch (error) {
    uToast.value.show({
      type: 'error',
      message: error.message || '登录失败',
      icon: 'close-circle'
    });
  } finally {
    loading.value = false;
  }
}

function navSetting() {
  jumpPage("login/setServer");
}

onShow(() => {
  // 如果之前选择了记住密码，自动填充用户名
  const savedUsername = uni.getStorageSync('username');
  if (savedUsername) {
    state.username = savedUsername;
    state.remMe = true;
  }
});
</script>

<style lang="scss">
.page-bg {
  width: 100%;
  height: 40vh;
  transform: scale(2) rotate(30deg);
  margin-right: -100rpx;
  background: #315EBC;
  overflow: hidden;
  position: absolute;
  z-index: 2;
}

.page-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  z-index: 10;
  padding-top: 150rpx;
}

.logo {
  height: 100rpx;
  width: 100rpx;
  margin: 0 auto 50rpx;
  display: block;
}

.login-form {
  width: 90%;
  height: auto;
  min-height: 600rpx;
  margin: 50rpx auto;
  border-radius: 30rpx;
  background: white;
  box-shadow: -2px 2px 10rpx 0px #d5d5d5;
  padding: 80rpx 50rpx 50rpx;

  .con-form {
    margin-bottom: 40rpx;

    .error-text {
      color: #f56c6c;
      font-size: 24rpx;
      margin-top: 10rpx;
    }
  }

  .remember-me {
    margin-top: 30rpx;

    :deep(.u-radio__label) {
      color: #666;
    }
  }
}

.page-setting {
  display: flex;
  justify-content: center;
  margin-top: 40rpx;
  padding: 20rpx;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  width: 80rpx;
  height: 80rpx;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>